<template>
	<!-- <view style="width: 750rpx;height: 90vh;overflow: auto;"> -->
	<view class="my-index">
		<view class="my">
			<!-- 顶部用户信息 -->
			<view class="user flex-row-around" style="width: 750rpx;height: 100px;
													  box-shadow: 0 0 15px 0 #ccc;">
				<!-- 头像 -->
				<view class="user-icon" style="width: 150rpx;height: 100%;padding-top: 1px;">
					<view class="user-icon" style="width: 120rpx;height: 60px;
												   border-radius: 50%;border: 2px solid #aaa;
												   overflow: hidden;margin: 16px auto;">
						<image :src="userInfo.memberImg"></image>
					</view>
				</view>
				<!-- 用户信息 -->
				<view class="user-info" style="width: 400rpx;">
					<view class="user-info-nickname user-info-text">
						{{userInfo.memberName}}
					</view>
					<!-- <view class="user-info-nickname user-info-text" style="font-size: 12px;color: #aaa;">
						{{userInfo.memberAccount}}
					</view> -->
				</view>
				<!-- 功能按钮 -->
				<view class="user-fuction" style="width: 150rpx;">
					<view class="user-fuction-edit user-fuction-button"
						  style="background-color: skyblue;color: white;"
						  @click="login"
						  v-if="!isLogin">
						去登录
					</view>
					<view class="user-fuction-edit user-fuction-button" 
						  style="background-color: mediumseagreen;color: white;"
						  @click="toupdate"
						  v-if="isLogin">
						修改
					</view>
					<view class="user-fuction-logout user-fuction-button"
						  style="background-color: #eee;border: 1px solid #aaa;
							     box-sizing: border-box;"
								 v-if="isLogin"
								 @click="loginOut">
						退出
					</view>
				</view>
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="option" style="width: 750rpx;margin-top: 20px;">
			<view class="option-list" style="width: 750rpx;">
				<view class="option-list-item flex-row" 
					  v-for="item in optionList" :key="item.id"
					  @click="optionJump(item)">
					<view class="item-text">
						{{ item.label }}
					</view>
					<view class="item-icon">
						<uni-icons
							type="right" 
							size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- <custom-tabbar></custom-tabbar> -->
	
</template>

<script>
	import { BASE_IMAGE_URL } from '../../utils/CommonValues.js';
	import request from '../../utils/request.js';
	export default {
		data() {
			return {
				isLogin: true, // 是否登录
				userInfo: {
					id: 'ASDKE52AD5',
					memberName: '游客11782',
					memberAccount: '000000000',
					memberImg: 'https://img1.baidu.com/it/u=999625247,2274639139&fm=253&fmt=auto&app=138&f=JPEG?w=542&h=500',
					memberPwd: '******'
				},
				optionList: [{
					id: 1,
					label: '我的收益',
					path: '/pages/my/income/income'
				},{
					id: 2,
					label: '下级会员',
					path: '/pages/my/offline/offline'
				},{
					id: 3,
					label: '我的订单',
					path: '/pages/my/orders/orders'
				},{
					id: 4,
					label: '我的地址',
					path: '/pages/my/address/address'
				},{
					id: 5,
					label: '我的收藏',
					path: '/pages/my/collect/collect'
				},{
					id: 6,
					label: '申请营销',
					path: '/pages/my/please/please'
				},{
					id: 7,
					label: '联系客服',
					path: '/pages/my/customerService/customerService'
				},{
					id: 8,
					label: '内容同步',
					path: '/pages/my/buy/buy'
				},{
					id: 9,
					label: '设备设置',
					path: '/pages/my/setting/setting'
				},{
                    id: 11,
                    label: '设备配置',
                    path: '/pages/my/wifi/wifi'
                },{
                    id: 12,
                    label: '寺庙捐款',
                    path: '/pages/my/contribution/contribution'
                },{
                    id: 13,
                    label: '关于',
                    path: '/pages/my/about/about'
                }]
			}
		},
		onShow() {
			// 每次页面展示的时候判断是否登录
			this.checkLogin();
		},
		methods: {
			checkLogin() {
				uni.getStorage({
					key: 'app_user_info'
				}).then(response => {
					this.isLogin = true;
					console.log(response.data);
					var info = JSON.parse(response.data);
					this.userInfo = info;
				}).catch(error => {
					this.isLogin = false;
					this.userInfo = {
						id: 'ASDKE52AD5',
						memberName: '游客11782',
						memberAccount: '000000000',
						memberImg: 'https://img1.baidu.com/it/u=999625247,2274639139&fm=253&fmt=auto&app=138&f=JPEG?w=542&h=500',
						memberPwd: '******'
					}
				})
			},
			// 修改用户信息
			toupdate() {
				uni.navigateTo({
					url: '/pages/my/update/update?userid=' + this.userInfo.advMembersId
				})
			},
			// 功能跳转
			optionJump(item) {
				if(this.isLogin || item.id == 10) {
					// 登录了才跳转
					uni.navigateTo({
						url: `${item.path}?id=${this.userInfo.advMembersId}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/my/login/login'
					})
				}
			},
			// 登录
			login() {
				uni.navigateTo({
					url: '/pages/my/login/login'
				})
			},
			loginOut() {
				// 退出登录
				uni.removeStorage({
					key: 'parent_account'
				}).then(res => {
					uni.removeStorage({
						key: 'app_user_info'
					}).then(response => {
						uni.showToast({
							title: '已退出',
							icon: 'none'
						})
						this.checkLogin();
					})
				})
			}
		}
	}
</script>

<style>
.user-info-text {
	margin: 10px 0;
	font-weight: bold;
}
.user-fuction-button {
	width: 140rpx;
	height: 26px;
	border-radius: 13px;
	margin: 10px 0;
	text-align: center;
	line-height: 26px;
}
.option-list-item {
	width: 650rpx;
	margin: 0 auto;
	height: 40px;
	border-bottom: 2px solid #eee;
	transition: all .3s;
}
.option-list-item:active {
	background-color: #eee;
}
</style>
